<template>
	<view class="bg-white p-34">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :borderBottom="false" labelWidth='auto' :model="model1" :rules="rules"
			ref="uForm">
			<u-form-item label="机构名称" :borderBottom="false" prop="userInfo.name" ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="请填写联系人姓名"></u--input>
			</u-form-item>
			<u-form-item label="联系人姓名" prop="userInfo.sex" @click="showSex = true; hideKeyboard()" ref="item1">
				<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请填写联系人姓名"
					border="none"></u--input>
				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="手机号(+86)" :borderBottom="false" prop="userInfo.name" ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="请填写联系人姓名"></u--input>
			</u-form-item>
			<u-form-item label="验证码" :borderBottom="false" prop="userInfo.name" ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="请填写联系人姓名"></u--input>
			</u-form-item>
			<u-form-item class="flex-j-b" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					<view class="">
						是否开启在线私聊
					</view>
					<view class="">
						需要提前联系在线客服获取在线私聊权限
					</view>
				</view>
				<u-switch v-model="value" @change="change"></u-switch>
				<!-- <u--input v-model="model1.userInfo.name" border="none"></u--input> -->
			</u-form-item>
			<u-form-item class="flex-j-b" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					是否开启拨打电话
				</view>
				<u-switch v-model="value" @change="change"></u-switch>
				<!-- <u--input v-model="model1.userInfo.name" border="none"></u--input> -->
			</u-form-item>
			<u-form-item labelPosition="top" label="验证码" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					上传机构头像
				</view>
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item labelPosition="top" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					上传认证材料
				</view>
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item labelPosition="top" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					机构介绍
				</view>
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item labelPosition="top" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					机构认证需对公转账50元
				</view>
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<u-form-item labelPosition="top" label="" :borderBottom="false" prop="userInfo.name" ref="item1">
				<view class="">
					上传转账凭证
				</view>
				<!-- <u--input v-model="model1.userInfo.name" border="none"></u--input> -->
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			change(e) {
				console.log('change', e);
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style>
	/* .u-form-item {
		background-color: #F4F4F4!important;
	} */
</style>